<template>
	<view class="picker">
		<view class="search-view">
			<view class="search-input">
				<view class="icon sousuo"></view>
				<input confirm-type="search" @confirm="search" type="text" placeholder="输入关键词搜索!" />
				<view class="check">已选:{{checkList.length}}</view>
			</view>
		</view>
		<view class="nav-main">
			<scroll-view class="nav-left" :style="'height:'+(addHeight-30)+'px;'" scroll-y> 
				<view class="nav-left-item" @click="load2(k)" :key="k" :class="k==active1 && 'active'" v-for="(v,k) in dataList1">
					{{v.name || ''}} {{v.desc || ''}}
					<view class="checknum" v-if="checkNum[v.id] > 0">{{checkNum[v.id]}}</view>
				</view>
			</scroll-view>
			<scroll-view class="nav-right" :style="'height:'+(addHeight-30)+'px;'" scroll-y>
				<view v-if="dataList2.length > 0" class="nav-right-item" v-for="(v,k) in dataList2" :key="k">
					<view class="nav-right-item-info" :class="active2==k && 'active'" @click="load3(k)">
						<text class="icon" :class="active2==k ? 'checked1 xiangxia' : 'checked2 xiangyou'"></text>
						{{v.name || ''}} {{v.desc || ''}}
						<view class="checknum" v-if="checkNum[v.id] > 0">{{checkNum[v.id]}}</view>
					</view>
					<block v-if="active2==k">
						<view class="nav-right-item-sub" v-for="(vv,kk) in dataList3" :key="kk" @click="checkData(kk)">
							<text class="icon jianshao1" :class="vv.checked ? 'checked2' : 'checked1'"></text>
							{{vv.name || ''}} {{vv.desc || ''}}
						</view>
					</block>
				</view>
				<view v-else class="empty">
					<view>加载中</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var Datas = []
	export default {
		data() {
			return {
				dataList1 : [],
				dataList2 : [],
				dataList3 : [],
				checkNum : [],
				active1 : 0,
				active2 : -1
			}
		},
		props: {
			height : {
				type: Number,
				default: 0
			},
			value:{
				type: Array,
				default: ()=> {return []}
			},
			json : {
				type: String,
				default: ''
			}
		},
		computed: {
			checkList() {
				return this.value
			},
			addHeight() {
				return this.height + 230
			}
		},
		mounted() {
			this.loadJson()
		},
		methods: {
			async loadJson(){
				Datas = await this.$api('GET','json',{url:this.json})
				this.load1()
			},
			load1() {
				this.dataList1 = []
				Datas.forEach((item) => {
					this.dataList1.push({id:item.id,name:item.name,desc:item.desc})
				})
				this.load2(0)
			},
			load2(k) {
				this.active1 = k
				this.active2 = -1
				this.dataList2 = []
				Datas[k].children.forEach((item) => {
					this.dataList2.push({id:item.id,name:item.name,desc:item.desc})
				})
				this.dataList3 = []
			},
			load3(k) {
				if(this.active2 == k){
					this.active2 = -1
					this.dataList3 = []
				}else{
					this.active2 = k
					this.dataList3 = Datas[this.active1].children[k].children
				}
			},
			search(){
				
			},
			checkData(kk) {
				let checkList = this.checkList
				if(this.dataList3[kk].checked){
					this.dataList3[kk].checked = false
					this.checkNum[this.dataList1[this.active1].id] --
					this.checkNum[this.dataList2[this.active2].id] --
					for (let n = 0; n < checkList.length; n++) {
						if(this.dataList3[kk].id == checkList[n]){
							checkList.splice(n,1)
						}
					}
				}else{
					this.dataList3[kk].checked = true
					if(this.checkNum[this.dataList1[this.active1].id]){
						this.checkNum[this.dataList1[this.active1].id] ++
					}else{
						this.checkNum[this.dataList1[this.active1].id] = 1
					}
					if(this.checkNum[this.dataList2[this.active2].id]){
						this.checkNum[this.dataList2[this.active2].id] ++
					}else{
						this.checkNum[this.dataList2[this.active2].id] = 1
					}
					checkList.push(this.dataList3[kk].id)
				}
				this.$emit('input',checkList)
			}
		}
	}
</script>

<style lang="scss">
	.picker{
		border-radius: 10upx;
		border: solid 1px #E0E0E0;
	}
	.search-view {
		border-radius: 10upx;
		background-color:#fff;
		display: flex;
		align-items: center;
		flex-direction: row;
		height: 60upx;
		padding: 0 5upx;
		font-size:22upx;
		.search-input {
			display: flex;
			border-radius: 48upx;
			background-color: #e7e7e7;
			padding: 0 10upx;
			width:100%;
			height: 50upx;
			line-height: 50upx;
			.icon {
				padding: 0 10upx;
				color:#666666;
			}
			input{
				width:65%;
				text-align: left;
			}
			.check{
				width:35%;
				color: #cc0000;
			}
		}
	}
	
	.nav-main {
		display: flex;
		.checknum {
			text-align: center;
			position : absolute;
			top:10upx;
			right: 5upx;
			color: #fff;
			background: #ff0000;
			font-size: 20upx;
			border-radius: 15upx;
			width: 30upx;
			height: 30upx;
			line-height: 30upx;
		}
		.nav-left {
			width: 250upx;
			overflow: hidden;
			border-right: solid 1px #E0E0E0;
			.nav-left-item {
				padding-left:5upx;
				font-size: 24upx;
				display: flex;
				align-items: center;
				border-bottom: solid 1px #E0E0E0;
				position : relative;
			}
			.active {
				color: #ffffff;
				background-color:$uni-color-primary;
			}
		}
		.nav-right {
			width: 100%;
			.nav-right-item {
				position : relative;
				color: #000000;
				text-align: left;
				font-size: 22upx;
				border-bottom: solid 1px #E0E0E0;
			}
			.nav-right-item-info{
				min-height: 40upx;
				display: flex;
				align-items: center;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp:2;
			}
			.active{
				color: #ffffff;
				background-color:$uni-color-primary;
			}
			.checked2 {
				padding:0 10upx;
				color: $uni-color-primary;
				font-size: 22upx;
			}
			.checked1 {
				padding:0 10upx;
				color: #ffffff;
				font-size: 22upx;
			}
			.nav-right-item-sub {
				display: flex;
				text-align: left;
				align-items: center;
				min-height: 40upx;
				font-size: 22upx;
				border-bottom: solid 1px #E0E0E0;
			}
			.nav-right-item-sub .active{
				color: #ffffff;
				background-color:$uni-color-primary;
			}
		}
	}
</style>
